<template>
  <div class="fit justify-center row">
    <div class="fit q-pa-md profile-playlists">
      <div class="grid-video-container">
        <playlist-item
          :value="playlist"
          v-for="playlist in playlists"
          :key="playlist.id"
        />
      </div>
    </div>
  </div>
  <div class="row wrap"></div>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import PlaylistItem from 'components/playlist/PlaylistItem.vue';
import { useUserStore } from 'src/stores/user-store.js';
const userStore = useUserStore();
const playlists = computed(() => userStore.myPlaylists);
onBeforeMount(async () => {
  await userStore.getMyPlaylists();
});
</script>
<style lang="scss" scoped>
.time-label {
  font-size: 14px;
  color: #acacac;
}
.profile-playlists {
  max-width: 1450px;
  min-width: 960px;
}
</style>
